<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/listmenu.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <a href="#">
                <img src="./images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app-down">
            <a href="#">
                <img src="./images/header_app.png" alt="">
            </a>
        </div>
    </header>
    <!-- 搜索栏 -->
    <div class="search">
        <input type="search" placeholder="请输入你想比价的商品">
        <div class="searchBtn">搜索</div>
    </div>
    <nav>
        <div class="product_list">
            <span>综合</span>
            <span>销售</span>
            <span>价格</span>
            <span>筛选</span>
        </div>
        <div id="wrapper">
            <div id="scroller">
                <ul>
                </ul>
                <div class="pull-loading">
                    下拉加载
                </div>
            </div>
        </div>
        </div>
    </nav>
    <!-- 底部 -->
    <footer>
        <div class="foot-top">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">
                <img src="./images/top.jpg" alt=""> 返回顶部
            </a>
        </div>
        <div class="copy">
            <p>
                <a href="#">手机APP下载</a>
                <a href="#">慢慢买手机版</a>
                -- 掌上比价平台
            </p>
            <p>m.manmanbuy.com</p>
        </div>
    </footer>
</body>
<!-- <script src="./lib/zepto.js"></script> -->
<script src="./lib/jquery.js"></script>
<script type="text/javascript" src="./demo/iscroll.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./lib/listmenu.js"></script>
<script type="listmenu/tmp" id="listmenu">
    {{each data value}}
    <li>
        <a href="#">
            <div class="tv_img">
                {{@value.productImg}}
            </div>
            <div class="tv_content">
                <p>{{value.productName}}</p>
                <div class="price">
                    <span>{{value.productPrice}}</span>
                    <em></em>
                </div>
                <div class="pinlun">
                    <span>{{value.productQuote}}</span>
                    <span>{{value.productCom}}</span>
                </div>
            </div>
        </a>
    </li>
    {{/each}}
</script>
<script type="text/javascript">
    var myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
            //下拉加载
            if (this.y < this.maxScrollY) {
                $(".pull-loading").html("释放加载");
                $(".pull-loading").addClass("loading");
            } else {
                $(".pull-loading").html("下拉加载");
                $(".pull-loading").removeClass("loading");
            }
        },
        onScrollEnd: function () { //拉动结束时
            //下7拉加载
            if ($(".pull-loading").hasClass('loading')) {
                $(".pull-loading").html("加载中...");
                pullOnLoad();
            }
        }
    });
    //上拉加载函数,ajax
    var pageid = 2;

    function pullOnLoad() {
        setTimeout(function () {
                pageid++;
                $.ajax({
                        type: 'get',
                        url: 'http://193.112.55.79:9090/api/getproductlist?categoryid=1&pageid=' + pageid,
                        dataType: 'json',
                        success: function (res) {
                            if (res.result.length > 0) {
                                var listmenuHtml = template('listmenu', {
                                    data: res.result
                                });
                                $('#scroller ul').append(listmenuHtml);
                                $(".pull-loading").html("加载成功");
                            } else {
                                $(".pull-loading").html("别拉了,没有数据了!"
                                    );
                                }
                                myscroll.refresh();
                            }
                        });


                }, 1000);
        }
</script>

</html>